<template>
  <div v-loading="loading" class="unit-set main">
    <xr-header label="金额单位设置">
      <el-button
        slot="ft"
        type="primary"
        @click="save">保存</el-button>
    </xr-header>
    <div class="main-bod">
      <div class="tips">
        设置金额在系统内的单位显示，支持元与万元的切换。<br>
        如果设置了万元单位，在数据录入页面金额单位为元，在列表和详情页面金额单位显示为万元。
      </div>
      <div class="list-wrap">
        <div class="title">应用下金额单位设置</div>
        <div v-for="(item, index) in list" v-show="index === 0" :key="index" class="list-item">
          <span class="item-label">{{ item.name }}</span>
          <el-radio-group v-model="item.radio">
            <el-radio
              v-for="(sitem, sindex) in radioList"
              :key="sindex"
              :label="sitem.label">
              {{ sitem.name }}
            </el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  adminMoneyUnitGetAPI,
  adminMoneyUnitSetAPI
} from '@/api/common'

import XrHeader from '@/components/XrHeader'

import store from '@/store'

export default {
  name: 'UnitSet',

  components: {
    XrHeader
  },

  data() {
    return {
      loading: false, // 展示加载中效果
      // crm:1 oa:2 jxc:3 hrm:4
      list: [
        { type: 1, name: 'CRM', radio: 0 },
        { type: 2, name: 'OA', radio: 0 },
        { type: 3, name: '进销存', radio: 0 },
        { type: 4, name: 'HRM', radio: 0 }
      ],
      radioList: [
        { name: '元', label: 0 },
        { name: '万元', label: 1 }
        // { name: '百万元', label: 2 },
        // { name: '千万元', label: 3 },
        // { name: '亿元', label: 4 }
      ]
    }
  },

  created() {
    this.getDetail()
  },

  methods: {
    /**
     * 获取详情
     */
    getDetail() {
      this.loading = true
      adminMoneyUnitGetAPI().then(res => {
        this.loading = false
        const list = res.data || []
        if (list.length > 0) {
          const typeMap = {}
          for (const item of list) {
            typeMap[item.label] = item.unit
          }
          for (const item of this.list) {
            item.radio = typeMap[item.type]
          }
        }
      })
        .catch(() => {
          this.loading = false
        })
    },

    /**
     * 保存操作
     */
    save() {
      this.loading = true
      const params = this.list.map(item => {
        return {
          label: item.type,
          unit: item.radio
        }
      })
      adminMoneyUnitSetAPI(params)
        .then(res => {
          this.loading = false
          this.$message.success('操作成功')
          store.dispatch('GetMoneyUnit')
          this.getDetail()
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../styles/index.scss";

.tips {
  margin: 10px 0 20px;
  color: $--color-text-secondary;
}

.list-wrap {
  .title {
    margin-bottom: 15px;
  }

  .list-item {
    margin-bottom: 15px;

    .item-label {
      display: inline-block;
      width: 80px;
    }
  }
}

</style>
